<template>
  <div class="baqsj-home" >
    <div class="content" v-if="!dialogVisible">
      <div class="grid-box flex-auto fl">
        <div
          v-for="(item, index) in flowList"
          :key="index"
          class="grid-item bg-white"
          :class="currentTips == item.id ? 'hover' : ''"
          @click="showProcessSelect(item)"
          @mouseover="showTipsFun(item.id)"
        >
          <img :src="item.icon" class="mr20">
          <div>
            <div class="title mb10">{{ item.name }}</div>
            <div class="des line-height-20">{{ item.subtitle1 }}</div>
            <div class="des">{{ item.subtitle2 }}</div>
          </div>
        </div>
      </div>
      <div class="font18 tips width300 fl">
        <div class="clearfix flex flex-row align-center height70">
          <div class="line" style="background:#277fd6;" />
          <span
            class="font20 ml10 flex-auto"
            style="color:#277fd6;"
          >请选择不安全事件</span>
        </div>
        <div style="margin-bottom: 10px">
          <el-input
            :style="{ width: '200px', 'margin-left': '5px', 'align-items': 'center' }"
            placeholder="请输入id，用来进入详情"
            v-model="detailId"
          />
        </div>
        <div style="margin-bottom: 10px">
          <el-button
            class="mr30"
            @click="toEdit()"
          >编辑</el-button>
          <el-button
            class="mr30"
            @click="toDetail()"
          >详情</el-button>
        </div>
        <div>
          <div
            v-for="(item, index) in currentList"
            :key="index"
            class="tip-item"
          >
            <div class="label font17 color-purple fw600">{{ item.title }}</div>
            <div class="des font15 mt8 line-height-22">{{ item.desc }}</div>
          </div>
          <el-divider />
          <div class="tip-item">
            <div class="label font17 color-purple fw600">流转方向</div>
            <div class="des font15 mt8 line-height-22">{{ currentFlow }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="processTitle"
      :visible.sync="centerDialogVisible"
      width="500px"
      center
    >
      <div class="baqsj-flow">
        <el-radio-group v-model="currentProcessId" size="large">
          <el-radio
            v-for="(item, index) in currentRadioOp"
            :key="index"
            :label="item.processId"
            border
            class="cushing-radio cushing-mini"
          >{{ item.title }}</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="mr30"
          @click="centerDialogVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          style="background: #277fd6;"
          @click="openApply"
        >确 认</el-button>
      </span>
    </el-dialog>
<!--    <el-dialog-->
<!--      title=""-->
<!--      :visible.sync="dialogVisible"-->
<!--      :fullscreen="true"-->
<!--      :before-close="handleClose"-->
<!--      :close-on-click-modal="false"-->
<!--      :show-close="false"-->
<!--      class="show-dialog-model"-->
<!--    >-->
<!--      &lt;!&ndash; 动态组件 &ndash;&gt;-->
<!--      <component :is="openModel" ref="currentComponent" @close="handleClose"/>-->
<!--    </el-dialog>-->
    <div v-if="dialogVisible" class="content">
      <!-- 动态组件 -->
      <component :is="openModel" ref="currentComponent" @close="handleClose"/>
    </div>
  </div>
</template>
<script>
// 诊疗相关-医疗处置事件
import DiagnosisMedicalHandle from './reportForm/diagnosisMedicalHandle.vue'
// 诊疗相关-报告异常，报告、标本差错事件
import DiagnosisSampleWrong from './reportForm/diagnosisSampleWrong.vue'
// 诊疗相关-饮食差错事件
import DiagnosisDietWrong from './reportForm/diagnosisDietWrong.vue'
// 诊疗相关-输液反应事件
import DiagnosisInfusionReaction from './reportForm/diagnosisInfusionReaction.vue'
// 意外事件-跌倒、坠床事件
import AccidentFall from './reportForm/accidentFall.vue'
// 意外事件-意外拔管事件
import AccidentTubeDrawing from './reportForm/accidentTubeDrawing.vue'
// 意外事件-烧烫伤事件
import AccidentBurnScald from './reportForm/accidentBurnScald.vue'
// 意外事件-其他意外事件
import AccidentOther from './reportForm/accidentOther.vue'
// 药物相关-药物不良反应事件
import MedicalBadReaction from './reportForm/medicalBadReaction.vue'
// 药物相关-给药错误事件
import MedicalWrongDrug from './reportForm/medicalWrongDrug.vue'
// 手术相关-手术不良事件
import SurgicalBad from './reportForm/surgicalBad.vue'
// 手术相关-非计划再次手术事件
import SurgicalNonPlaned from './reportForm/surgicalNonPlaned.vue'
// 防保相关-职业暴露不良事件
import PreventionAndProtection from './reportForm/preventionAndProtection.vue'
// 输血相关-用血错误事件
import TransfusionWrongBlood from './reportForm/transfusionWrongBlood.vue'
// 输血相关-输血反应事件
import TransfusionBloodReaction from './reportForm/transfusionBloodReaction.vue'
// 医患沟通相关-医患沟通（纠纷）事件
import DoctorAndPatientNegotiation from './reportForm/doctorAndPatientNegotiation.vue'
// 医疗器械相关-医疗器械事件
import MedicalInstrument from './reportForm/medicalInstrument.vue'
// 其他不良事件上报-公共事件
import OtherReactionPublic from './reportForm/otherReactionPublic.vue'
// 其他不良事件上报-治安事件
import OtherReactionPublicSecurity from './reportForm/otherReactionPublicSecurity.vue'
// 其他不良事件上报-其他事件
import OtherReactionGeneral from './reportForm/otherReactionGeneral.vue'

import moment from 'moment'
import { mapGetters } from 'vuex'
import { newListUser } from '@/api/system/sysuser'

import { doQueryDetail } from '@/api/report/reportForm'

export default {
  name: 'ApplyHome',
  components: {
    DiagnosisSampleWrong,
    DiagnosisMedicalHandle,
    DiagnosisDietWrong,
    DiagnosisInfusionReaction,
    AccidentFall,
    AccidentTubeDrawing,
    AccidentBurnScald,
    AccidentOther,
    MedicalBadReaction,
    MedicalWrongDrug,
    SurgicalBad,
    SurgicalNonPlaned,
    PreventionAndProtection,
    TransfusionWrongBlood,
    TransfusionBloodReaction,
    DoctorAndPatientNegotiation,
    MedicalInstrument,
    OtherReactionPublic,
    OtherReactionPublicSecurity,
    OtherReactionGeneral
  },
  data() {
    return {
      // 当前用户信息
      thisUserInfo: {},
      detailId: '100041',
      centerDialogVisible: false,
      processTitle: '',
      showTips: false,
      currentProcessId: '',
      currentTips: 1,
      currentFlow: '',
      currentList: [],
      flowList: [
        {
          id: 1,
          name: '诊疗相关',
          subtitle1:
            '医疗处置事件；报告、标本差错事件;饮食差错事件；输液反应事件;其他不良事件',
          subtitle2: '',
          children: [
            {
              title: '医疗处置事件',
              desc:
                '患者身份识别或诊疗部位错误、误诊、漏诊、错误治疗、技术操作失误等',
              processId: 42,
              router: 'DiagnosisMedicalHandle'
            },
            {
              title: '报告、标本差错事件',
              desc: '各类原因引起的检验检查报告错误、标本丢失',
              processId: 43,
              router: 'DiagnosisSampleWrong'
            },

            {
              title: '饮食差错事件',
              desc: '各类原因引起的患者饮食差错',
              processId: 44,
              router: 'DiagnosisDietWrong'
            },
            {
              title: '输液反应事件',
              desc: '各类原因引起的输液事件（不适用于门诊患者）',
              processId: 45,
              router: 'DiagnosisInfusionReaction'
            }
          ],
          flow: '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/zlxg.png'),
          process_key: '1',
          mid: 'baqsj'
        },

        {
          id: 2,
          name: '药物相关',
          subtitle1: '药物不良反应事件；给药错误事件',
          subtitle2: '',
          children: [
            {
              title: '药物不良反应事件',
              desc: '用药后发生可疑药物不良反应事件',
              processId: 48,
              router: 'MedicalBadReaction'
            },
            {
              title: '给药错误事件',
              desc: '因医嘱、处方、调剂、给药等不当引起各类用药错误事件',
              processId: 49,
              router: 'MedicalWrongDrug'
            }
          ],
          flow:
            '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/ywxg.png'),
          process_key: '2',
          mid: 'baqsj'
        },

        {
          id: 3,
          name: '医疗器械相关',
          subtitle1: '医疗器械事件',
          subtitle2: '',
          children: [
            {
              title: '医疗器械事件',
              desc: '各类因医疗设备缺陷、故障等引起的不良事件',
              processId: 47,
              router: 'MedicalInstrument'
            }
          ],
          flow: '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/ylqx.png'),
          process_key: '3',
          mid: 'baqsj'
        },
        {
          id: 4,
          name: '医患沟通相关',
          subtitle1: '医患沟通（纠纷）事件',
          subtitle2: '',
          children: [
            {
              title: '医患沟通（纠纷）事件',
              desc:
                '医患沟通不良、医患语言冲突、医患行为冲突、患者在其他医院已经存在医疗纠纷；患者因社会问题延长住院等。',
              processId: 50,
              router: 'DoctorAndPatientNegotiation'
            }
          ],
          flow: '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/yhgt.png'),
          process_key: '4',
          mid: 'baqsj'
        },
        {
          id: 5,
          name: '输血相关',
          subtitle1: '用血错误事件；输血反应事件',
          subtitle2: '',
          children: [
            {
              title: '用血错误事件',
              desc:
                '因用血医嘱开具、备血、传送及输血过程中发生错误引起的各类用血错误事件',
              processId: 51,
              router: 'TransfusionWrongBlood'
            },
            {
              title: '输血反应事件',
              desc: '输血后发生输血反应事件',
              processId: 52,
              router: 'TransfusionBloodReaction'
            }
          ],
          flow: '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/sxxg.png'),
          process_key: '5',
          mid: 'baqsj'
        },
        {
          id: 6,
          name: '护理相关',
          subtitle1: '主要发生在病房，在护理时发生的不良事件',
          subtitle2: '',
          children: [
            {
              title: '护理相关',
              desc: '主要发生在病房，在护理时发生的不良事件'
            }
          ],
          flow: '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/hl.png'),
          process_key: '6',
          mid: 'baqsj'
        },
        {
          id: 7,
          name: '院感相关',
          subtitle1: '院内感染不良事件',
          subtitle2: '',
          tag: '(仅内网)',
          children: [
            {
              title: '院内感染不良事件',
              desc: '病区内发生的可疑、特殊院内感染事件',
              processId: 533,
              type: 'url',
              url: 'https://www.baidu.com/'
            }
          ],
          flow: '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/ygxg.png'),
          process_key: '7',
          mid: 'baqsj'
        },
        {
          id: 8,
          name: '手术相关',
          subtitle1: '手术不良事件；操作不良事件；非计划再次手术事件',
          subtitle2: '',
          children: [
            {
              title: '手术不良事件',
              desc:
                '手术部位、术式选择错误；患者术中死亡、术中术后出现患者及家属不理解的并发症；手术器械遗留在体内等；',
              processId: 54,
              router: 'SurgicalBad'
            },
            {
              title: '非计划再次手术事件',
              desc:
                '原手术的直接或间接并发症所导致的非预期二次或再次手术（不包括正常的分期手术）',
              processId: 56,
              router: 'SurgicalNonPlaned'
            },
            {
              title: '手术麻醉不良事件',
              desc:
                '请到手麻系统进行上报，谢谢',
              processId: 563,
              type: 'url',
              url: 'https://www.baidu.com/'
            }
          ],
          flow: '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/ssxg.png'),
          process_key: '8',
          mid: 'baqsj'
        },
        {
          id: 9,
          name: '防保相关',
          subtitle1: '职业暴露不良事件',
          subtitle2: '',
          children: [
            {
              title: '职业暴露不良事件',
              desc: '医务人员在医疗过程中发生职业暴露伤害事件（如针刺伤、血液体液飞溅入粘膜器官等）',
              processId: 57,
              router: 'PreventionAndProtection'
            }
          ],
          flow: '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/fbxg.png'),
          process_key: '9',
          mid: 'baqsj'
        },
        {
          id: 10,
          name: '意外事件',
          subtitle1: '跌倒、坠床事件；出走事件；冲动伤人事件；噎食事件；自杀、自伤事件；其他意外事件',
          subtitle2: '',
          children: [
            {
              title: '跌倒、坠床事件',
              desc: '因意外跌至地面或其他平面导致的伤害事件',
              processId: 580,
              router: 'AccidentFall'
            },
            {
              title: '意外拔管事件',
              desc: '各类原因引起的非计划性拔管',
              processId: 581,
              router: 'AccidentTubeDrawing'
            },
            {
              title: '烧烫伤事件',
              desc: '诊疗或手术过程中发生烧烫伤事件',
              processId: 582,
              router: 'AccidentBurnScald'
            },
            {
              title: '其他意外事件',
              desc: '患者自残、自杀、失踪、猝死等',
              processId: 583,
              router: 'AccidentOther'
            }
          ],
          flow: '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/ywsj.png'),
          process_key: '10',
          mid: 'baqsj'
        },
        {
          id: 11,
          name: '其他不良事件上报',
          subtitle1: '公共事件；治安事件；其他事件',
          subtitle2: '',
          children: [
            {
              title: '公共事件',
              desc: '停电、停水、漏水、火警、物业管理、大面积网络瘫痪等',
              processId: 64,
              router: 'OtherReactionPublic'
            },
            {
              title: '治安事件',
              desc: '酗酒打闹、偷窃等治安问题',
              processId: 65,
              router: 'OtherReactionPublicSecurity'
            },
            { title: '其他事件', desc: '其他事件', processId: 66, router: 'otherReactionGeneral' }
          ],
          flow: '上报人提交→医务科分派→分派职能部门处理→医务科审核备案→上报人收到确认结果',
          icon: require('@/assets/baqsj/qt.png'),
          process_key: '11',
          mid: 'baqsj'
        }
      ],
      currentRadioOp: [],
      dialogVisible: false,
      openModel: ''
    }
  },
  computed: {
    ...mapGetters(['newUserInfo'])
  },
  created() {
    this.currentList = this.flowList[0].children
    // 当前登录的用户信息
    newListUser({ userID: this.newUserInfo.userID, pageSize: 1 }).then(res => {
      this.thisUserInfo = res.records[0]
    })
  },
  methods: {
    showTipsFun(type) {
      this.currentTips = type
      this.currentList = this.flowList[type - 1].children
      this.currentFlow = this.flowList[type - 1].flow
    },
    showProcessSelect(item) {
      if (item.name === '护理相关') {
        this.$message({
          type: 'error',
          message: '建设中，暂未开放！'
        })
      } else if (item.children.length === 1) {
        this.processTitle = item.name
        this.currentRadioOp = item.children
        this.currentProcessId = item.children[0].processId
        this.openApply()
      } else {
        this.processTitle = item.name
        this.centerDialogVisible = true
        this.currentRadioOp = item.children
        this.currentProcessId = item.children[0].processId
      }
    },
    handleClose(val) {
      this.dialogVisible = false
    },
    toEdit() {
      // 查看详情
      doQueryDetail({ id: this.detailId, currentPage: 1, pageSize: 10 }).then(res => {
        console.log('res', res)
        if (res.records && res.records.length === 1) {
          this.dialogVisible = true
          // 调用组件中的方法
          this.openModel = res.records[0].eventNo
          this.$nextTick(() => {
            this.$refs.currentComponent.editInfo(this.getRuleInfo(), res.records[0])
          })
        }
      })
    },
    toDetail() {
      this.dialogVisible = true
      // 查看详情
      doQueryDetail({ id: this.detailId, currentPage: 1, pageSize: 10 }).then(res => {
        console.log('res', res)
        if (res.records && res.records.length === 1) {
          this.dialogVisible = true
          this.openModel = res.records[0].eventNo
          // 调用组件中的方法
          this.$nextTick(() => {
            this.$refs.currentComponent.detail(res.records[0])
          })
        }
      })
    },
    openApply() {
      let info = ''
      for (const item of this.currentRadioOp) {
        if (item.processId === this.currentProcessId) {
          info = item
          console.log('item', item)
          break
        }
      }
      if (info === '') {
        this.$message({
          type: 'error',
          message: '请确认当前选项'
        })
        return
      }
      // 跳转链接
      if (info.type === 'url') {
        window.open(info.url)
        return
      }
      if (info.router === '') {
        this.$message({
          type: 'error',
          message: '请选择相应的类别'
        })
        return
      }
      this.centerDialogVisible = false
      this.dialogVisible = true
      this.openModel = '' + info.router
      // 调用组件中的方法
      this.$nextTick(() => {
        this.$refs.currentComponent.open(this.getRuleInfo(), this.getModelInfo())
      })
    },
    getRuleInfo() {
      // 获取规则数组
      return {
        'baqsjRecordParty.name': [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        'baqsjRecordParty.empNo': [{ required: true, message: '请输入工号', trigger: 'blur' }],
        'baqsjRecordParty.stationName': [{ required: true, message: '请输入职称', trigger: 'blur' }],
        'baqsjRecordParty.deptName': [{ required: true, message: '请输入部门/病区', trigger: 'blur' }],
        'baqsjRecordParty.usergroupName': [{ required: true, message: '请输入岗位', trigger: 'blur' }],
        'baqsjRecordParty.className': [{ required: true, message: '请选择人员分类', trigger: 'blur' }],
        'baqsjRecordProperty.patientName': [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        'baqsjRecordProperty.patientAge': [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        'baqsjRecordProperty.patientNo': [{ required: true, message: '请输入病历号/住院号', trigger: 'blur' }],
        'baqsjRecordProperty.patientType': [{ required: true, message: '请选择患者类型', trigger: 'blur' }],
        'baqsjRecordProperty.currentDiagnosis': [{ required: true, message: '请输入诊断/手术名称', trigger: 'blur' }],
        'baqsjRecordReport.eventDivision': [{ required: true, message: '请选择发生院区', trigger: 'blur' }],
        'baqsjRecordReport.eventLocale': [{ required: true, message: '请选择发生地点', trigger: 'blur' }],
        'baqsjRecordReport.eventTime': [{ required: true, message: '请选择发生日期/时间', trigger: 'blur' }]
      }
    },
    getModelInfo() {
      // 当前用户新信息
      const userInfo = this.thisUserInfo
      // form初始化
      /**
       *         eventNo: 'DiagnosisSampleWrong',
       *         eventName: '诊疗相关-报告异常，标本差错事件',
       事件编号：AccidentChokingFood-意外事件-噎食事件,\nAccidentFall-意外事件-跌倒、坠床事件,\nAccidentHurt-意外事件-冲动伤人事件,\n
       AccidentOther-意外事件-其他意外事件,\nAccidentOut-意外事件-出走事件,\nAccidentSelfKill-意外事件-自杀，自伤事件,\n
       DiagnosisDietWrong-诊疗相关-饮食差错事件,\nDiagnosisInfusionReaction-诊疗相关-输液反应事件,\nDiagnosisMedicalHandle-诊疗相关-医疗处置事件,\n
       DiagnosisOtherReaction-诊疗相关-其他反应事件,\nDiagnosisSampleWrong-诊疗相关-报告异常，标本差错事件,\n
       DoctorAndPatientNegotiation-医患沟通相关-医患沟通 (纠纷) 事件,\nHospitalInfected-院感相关-院内感染事件,\nMedicalBadReaction-药物相关-药物不良反应事件,\n
       MedicalWrongDrug-药物相关-给药错误事件,\nMedicalInstrument-医疗器械相关-医疗器械事件,\nOtherReactionGeneral-其他不良事件上报-其他事件,\n
       OtherReactionPublic-其他不良事件上报-公共事件,\nOtherReactionPublicSecurity-其他不良事件上报-公共治安事件,\n
       PreventionAndProtection-防保相关-职业暴露不良事件,\nSurgicalBad-手术相关-手术不良事件,\nSurgicalNonPlaned-手术相关-非计划手术不良事件,\n
       SurgicalOperationBad-手术相关-操作不良事件,\nTransfusionBloodReaction-输血相关-输血反应事件,\nTransfusionWrongBlood-输血相关-用血错误事件

       */
      const models = {
        // 审核状态,结果： 1草稿 2处理中（提交/修改）
        auditStatus: 1,
        // 填报人情况
        baqsjRecordReport: {
          // 匿名：0-不匿名，1-匿名
          anonymous: 0,
          // 院区
          eventDivision: '',
          // 地点: 10-病区，11-门急诊，12-检查室，13-实验室，14-公共区域，15-不明，16-其他
          eventLocale: '1',
          // 其他基本信息
          createBy: userInfo.name,
          name: userInfo.name,
          reportBy: userInfo.name,
          createTime: moment().format('YYYY-MM-DD HH:mm:ss'),
          reportTime: moment().format('YYYY-MM-DD HH:mm:ss'),
          depId: userInfo.depId,
          deptName: userInfo.depName,
          empNo: userInfo.empNo,
          mobileNo: userInfo.phoneNo,
          reportDeptId: userInfo.depId,
          stationId: userInfo.stationId,
          stationName: userInfo.stationName,
          usergroupId: userInfo.userGroupID,
          usergroupName: userInfo.groupName
        },
        // 当事⼈信息
        baqsjRecordParty: {
          className: '10',
          classNameOther: '',
          createBy: userInfo.name,
          name: userInfo.name,
          reportBy: userInfo.name,
          createTime: moment().format('YYYY-MM-DD HH:mm:ss'),
          reportTime: moment().format('YYYY-MM-DD HH:mm:ss'),
          depId: userInfo.depId,
          deptName: userInfo.depName,
          empNo: userInfo.empNo,
          stationId: userInfo.stationId,
          stationName: userInfo.stationName,
          usergroupId: userInfo.userGroupID,
          usergroupName: userInfo.groupName
        },
        // 事件属性 （当事人患者信息、事件信息）
        baqsjRecordProperty: {
          // 1.患者类型：0-住院病人;1-门诊病人;2-急诊病人
          patientType: '0'
        },
        // 报告异常，标本差错信息
        baqsjRecordDiagnosisSampleWrong: {},
        // 处理措施
        baqsjRecordHandle: {
          // 无介入：100-不需任何处理，101-病人拒绝处置，102-其他
          nonInvolved: '100'
        },
        // 其他信息说明 => 1.处理后病⼈的情况
        eventMeasurement: '',
        // 其他信息说明 => 2.叙述整起事件经过
        eventDescription: '',
        // 其他信息说明 => 3.备注（造成影响）
        eventAffect: ''
      }
      // 获取患者信息
      // 返回model
      return models
    },
    submitWorkOrder() {
      // if (this.currentProcessId == 12) {
      //   this.$message({
      //     type: "error",
      //     message: "建设中，暂未开放！"
      //   })
      //   return
      // }
      this.centerDialogVisible = false
      this.$router.push({
        path: '/baqsj/create-report',
        query: { processId: this.currentProcessId }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.baqsj-home {
  width: 100%;
  height: calc(100vh - 50px);
  padding: 20px 20px 20px 20px;
  margin: 0 auto;

  .header {
    margin-bottom: 30px;
  }

  .content {
    height: calc(100vh - 50px);

    .tip-item {
      margin-bottom: 15px;
    }
  }

  .bg-purple {
    background: #ea7f35;
  }

  .bg-white {
    background: #fff;
  }

  .grid-box {
    width: calc(100% - 300px);
    display: flex;
    flex-wrap: wrap;

    .grid-item {
      border-radius: 4px;
      width: calc(33% - 15px);
      display: flex;
      flex-direction: row;
      color: #111;
      transition: 0.2s all ease;
      -webkit-box-shadow: 0 15px 30px 0 rgb(0 0 0 / 20%);
      box-shadow: 0 15px 30px 0 rgb(0 0 0 / 20%);
      max-height: 250px;
      min-height: 130px;
      padding: 20px 10px 10px 10px;
      margin-right: 15px;
      margin-bottom: 15px;
      border-radius: 16px;
      border: 2px solid #ffffff;

      img {
        width: 60px;
        height: 60px;
      }

      .title {
        font-size: 18px;
      }

      &:hover {
        // top: -3px;
        // right: -1px;
        -webkit-box-shadow: 0 15px 30px 0 rgb(0 0 0 / 50%);
        box-shadow: 0 15px 30px 0 rgb(0 0 0 / 50%);
        cursor: pointer;
        box-sizing: border-box;
      }

      .des {
        font-size: 15px;
        margin-top: 5px;
        color: #606260;
      }
    }

    .hover {
      // top: -3px;
      // right: -1px;
      -webkit-box-shadow: 0 10px 25px 0 rgb(0 0 0 / 50%) !important;
      box-shadow: 0 10px 25px 0 rgb(0 0 0 / 50%) !important;
      border: 2px solid #277fd6;
      cursor: pointer;
      box-sizing: border-box;
    }
  }

  .color-purple {
    color: #333333;
  }

  .line {
    height: 22px;
    width: 5px;
    background: #277fd6;
  }

  .tips {
    padding: 0px 15px;
    background: #f3f7ff;
    border-radius: 10px;
    /*border: 2px solid rgba(234, 127, 53, 0.3);
    -webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 5px 5px 0 rgb(0 0 0 / 10%);*/
  }
}

.content {
  height: calc(100vh - 50px);
  overflow-y: auto;
}
</style>
